<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../day53/jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        h3 {
            padding: 20px 10px;
        }

        li {
            list-style: none;
        }

        .list li {
            line-height: 45px;
            text-indent: 10px;
            border: 1px solid #333;
        }

        .buttonGroup {
            margin-top: 20px;
        }

        .active {
            background-color: #6ff;
        }

        /* div[class] {
            font-size: 18px;
        } */
        /* li[class] {
            background: red;
        } */

        /* li[class="first"] {
            background: red;
        } */
        /* li:not([class="first"]) {
            background: red;
        } */
        /* li[class^="f"] {
            background: red;
        } */
        /* li[class$="t"] {
            background: red;
        } */

        /* li[class*="a"] {
            background: red;
        } */
        /* .list li:nth-child(even) {
            background-color: #6ff;
        } */
    </style>
</head>
<body>
    <div id="demo" class="wrap">
        <h3 id="title">批量操作元素</h3>
        <ul class="list">
            <li class="first">01</li>
            <li>02</li>
            <li>03</li>
            <li>04</li>
            <li>05</li>
            <li class="last"><span>06</span></li>
        </ul>
    </div>
</body>
<script>
    // filter(selector|dom|domList|jquery|callback)   筛选出与指定表达式匹配的元素集合。

    // 1. 传入一个css选择器作为筛选条件
    $(".list li").filter(".first").css({ background:"red" });
    $(".list li").filter("[class]").css({ background:"red" });

    // 2. 传入一个原生dom元素或dom元素的集合  作为筛选条件
    var first = document.getElementsByClassName("first")[0];
    var liList = document.querySelectorAll(".first,.last");
    $(".list li").filter(first).css({ background: "blue" });
    $(".list li").filter(liList).css({ background: "skyblue" });

    // 3. 传入一个jquery对象  作为筛选条件
    $(".list li").filter($(".first")).css({ background: "pink" });

    // 4. 传入一个回调函数 => 遍历jquery对象,每次循环时执行传入的回调函数,回调函数返回一个条件,把满足条件的元素 筛选出来,放到新的jquery对象中
    $(".list li").filter(function (index, item) {
        // console.log(index, item, this);
        return $(this).prop("class")
    }).css({ background: "red" });


    // not(selector|dom|domList|jquery|callback)   删除与指定表达式匹配的元素  => 得到了不满足条件的元素集合。(对filter取反)
    // 1. 传入一个css选择器作为筛选条件
    $(".list li").not(".first").css({ background: "green" })
    $(".list li").not("[class]").css({ background: "red" });

    // 2. 传入一个原生dom元素或dom元素的集合  作为筛选条件
    // var first = document.getElementsByClassName("first")[0];
    // var liList = document.querySelectorAll(".first,.last");
    // $(".list li").not(first).css({ background: "red" })
    // $(".list li").not(liList).html(123123);

    // 3. 传入一个jquery对象  作为筛选条件
    // $(".list li").not($(".first")).css({ background: "red" });

    // 4. 传入一个回调函数 => 遍历jquery对象,每次循环时执行传入的回调函数,回调函数返回一个条件,把不满足条件的元素 筛选出来,放到新的jquery对象中
    // $(".list li").not(function (index, item) {
    //     // console.log(index, item, this);
    //     return $(this).prop("class");
    // }).css({ background: "pink" });



    // is(selector|dom|domList|jquery|callback)    根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。 (类似数组中some => 判断集合中是否存在满足条件的元素)
    //1. 传入一个css选择器作为筛选条件
    // console.log($(".list li").eq(0).is(".first"));   //单元素 精确判断  true
    // console.log($(".list li").is(".first"));         //多元素 -> 只要有一个满足即可   true

    // 2. 传入一个原生dom元素或dom元素的集合  作为筛选条件
    // var first = document.getElementsByClassName("first")[0];
    // var liList = document.querySelectorAll(".first,.last");
    // console.log($(".list li").is(first));    //true
    // console.log($(".list li").is(liList));   //true

    // 3. 传入一个jquery对象  作为筛选条件
    // console.log($(".list li").is($(".first")));   //true

    // 4. 传入一个回调函数 => 遍历jquery对象,每次循环时执行传入的回调函数,回调函数返回一个条件,只要有一个元素满足条件 则返回true,都不满足返回false
    // var flag = $(".list li").is(function (index, item) {
    //     // console.log(index, item, this);
    //     return $(this).text().includes("4");
    // })
    // console.log(flag);    //true



    // map(callback)     将一组元素转换成其他数组（不论是否是元素数组）
    // 传入一个回调函数 => 遍历jquery对象,每次循环时执行传入的回调函数,回调函数有一个返回值,把返回值放到jquery对象中返回

    var $list = $(".list li").map(function (index, item) {
        return $(this).text();
    })
    console.log($list); //jquery对象

    var list = Array.from($list);
    var list = [...$list];
    var list = $list.get();
    console.log(list);
</script>
</html>